<template>
	<main-content hasTab>
		<view class="home-body">
			<view class="count-box p-16 ">
				<view class="flex flex-wrap flex-row justify-between items-center p-y-32">
					<view class="flex flex-wrap flex-row items-center">
						<view class="user-img flex justify-content items-center">
							<view class="" v-if="src">
								<u-image width="100%" height="100%" :src="src"></u-image>
							</view>
							<view class="default-img font-bold main-color font-32" v-else>
								{{userInfo?.name?.[0] ||userInfo?.merName?.[0]}}
							</view>
						</view>
						<view class=" p-l-8">
							<view class="font-18" style="color: #fff;">
								{{userInfo?.name ||userInfo?.merName}}
							</view>
							<view class="font-14" style="color: rgba(255, 255, 255, 0.6);">
								{{userInfo?.phone ||userInfo?.merPhone}}
							</view>
						</view>
					</view>
					<view class="">
						<view class="u-setting-btn flex justify-content items-center"
							@click="$System.goTo('/pages/my/setting')">
							<u-image width="38rpx" height="38rpx" :src='settingIcon'></u-image>
							<!-- <u-icon name="setting-fill" color='#fff' size="38"></u-icon> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="query-box">
				<view class="p-16 query-box-view">
					<view class="view-group p-b-8" v-for="(group,groupI) in contentConfig" :key="groupI">
						<view class="p-b-16">
							<group-title>
								<template #icon>
									<view class="main-color">
										<u-icon name="title-icon" custom-prefix="custom-icon" />
									</view>
								</template>
								{{groudArr[groupI]}}
							</group-title>
						</view>
						<view class="view-item p-x-16 p-y-12 m-b-8 flex flex-row justify-between items-center"
							v-for='(item,i) in group' :key="i">
							<view class="list-title">
								{{item.label}}
							</view>
							<view class="">
								{{
								item?.customRender ? item.customRender({userInfo,text:userInfo[item.dataIndex]}) : userInfo[item.dataIndex]
							}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		debounce,
		selectDictLabel,
		formatToMoney,
		parseTime
	} from '@/common/common.js'
	import {
		TimeUtils
	} from '@/common/myDay.js'
	import {
		workspaceApi
	} from '@/common/api/workspace/index.js'

	const settingIcon = '/static/images/setting.svg'

	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})

	const imgUrlBg = computed(() => {
		return useUserStore().userType == '2' ?
			'linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(217, 228, 255, 1) 100%)' :
			'linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(217, 255, 254, 1) 100%)'
	})

	const userInfo = ref({})
	const getUserInfo = async () => {
		let param = {
			id: useUserStore().userInfo.id
		}
		let res = await workspaceApi.getInfo(param)
		userInfo.value = res.data
	}
	// console.log('userInfo===>', userInfo);

	const groudArr = computed(() => {
		let agent = ['基本信息', '登录信息']
		let mch = ['商户信息', '代理商信息']
		return useUserStore().userType == '2' ? agent : mch
	})
	const contentConfig = computed(() => {
		let agent = [
			[{
				label: '账号',
				dataIndex: 'no',
				// customRender: (data) => {
				// 	return selectDictLabel(ZZB_AGENT_NO_STATUS, data.text)
				// },
			}, {
				label: '公司简称',
				dataIndex: 'companyAbbrName',
				// customRender: (data) => {
				// 	return 
				// },
			}, {
				label: '公司联系人',
				dataIndex: 'name',
			}, {
				label: '公司联系方式',
				dataIndex: 'phone',
			}, {
				label: '地址',
				dataIndex: 'addr',
			}],
			[{
				label: '上次登录',
				dataIndex: 'loginTime',
				customRender: (data) => {
					return parseTime(data.text)
				},
			}, {
				label: 'IP地址',
				dataIndex: 'lIp',
				// customRender: (data) => {
				// 	return 
				// },
			}]
		]
		let mch = [
			[{
				label: '账号',
				dataIndex: 'no',
			}, {
				label: '商户简称',
				dataIndex: 'companyAbbrName',
			}, {
				label: '商户联系人',
				dataIndex: 'merName',
			}, {
				label: '商户联系方式',
				dataIndex: 'merPhone',
			}, {
				label: '地址',
				dataIndex: 'addr',
			}, {
				label: '上次登录',
				dataIndex: 'loginTime',
				customRender: (data) => {
					return parseTime(data.text)
				},
			}, {
				label: 'IP地址',
				dataIndex: 'lIp',
			}],
			[{
				label: '代理商名称',
				dataIndex: 'agentComName'
			}, {
				label: '联系人',
				dataIndex: 'agentName',
			}, {
				label: '联系方式',
				dataIndex: 'agentPhone',
			}]
		]
		return useUserStore().userType == '2' ? agent : mch
	})

	onLoad(async (options) => {
		uni.setNavigationBarColor({
			frontColor: '#ffffff', // 导航栏标题颜色，只能是'black'或'white'
			backgroundColor: proxy.$System.maiColor.value // 导航栏背景颜色
		})
		getUserInfo()
		// 动态设置标题
		// uni.setNavigationBarTitle({
		// 	title: '标题'
		// })
	})
	onReady(() => {
		// paging.value.reload()
	})
</script>
<style>
	page {
		background: #f6f7f8;
	}
</style>
<style lang='scss' scoped>
	.data-theme-agent .home-body,
	.data-theme-merchant .home-body {
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: var(--maiColor);
	}

	.data-theme-agent .home-body {
		background-image: url('/static/images/index_bg_agent.png');
	}

	.data-theme-merchant .home-body {
		background-image: url('/static/images/index_bg_mch.png');
	}

	.count-box {
		display: flex;
		flex-direction: column;
	}

	.user-img {
		width: 128rpx;
		height: 128rpx;
		border-radius: 500rpx;
		background: v-bind(imgUrlBg);
		overflow: hidden;
	}

	.u-setting-btn {
		width: 64rpx;
		height: 64rpx;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 0.2);
	}

	.view-item {
		background-color: #fff;
		border-radius: 16rpx;
	}

	.query-box {
		position: relative;
		z-index: 1;

		.query-box-view {
			background-color: rgba(246, 247, 248, 1);
			border-radius: 16rpx;
		}

		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			background-color: var(--maiColor);
			width: 100%;
			height: 50%;
		}
	}
</style>